<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./tubiao/iconfont.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        header {
            width: 100%;
            height: 50px;
            background-color: #0099cb;
            display: flex;
            justify-content: space-between;
        }

        header .logo {
            width: 200px;
            position: relative;
        }

        header .logo h1 {
            font-size: 25px;
            margin-left: 40px;
            margin-top: 7px;
            color: white;
        }

        header .logo .iconfont {
            font-size: 30px;
            position: absolute;
            top: 10px;
            left: 230px;
            color: white;
        }

        header .user span {
            display: inline-block;
            margin-right: 20px;
            margin-top: 15px;
            color: white;
        }

        .content {
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
        }

        .left {
            width: 200px;
            height: 100%;
            background-color: #2d3e50;
            color: white;
        }

        .left ul {
            width: 100%;
            height: 100%;
        }

        .left ul li {
            width: 100%;
            box-sizing: border-box;
            padding: 0 20px;
            position: relative;
            line-height: 40px;
        }

        .left ul li .icon-youjiantou {
            position: absolute;
            right: 20px;
        }

        .right {
            flex: 1;
            background-color: #f7f6fb;
        }

        .right .top2 {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 40px;
            background-color: white;
            line-height: 40px;
            box-sizing: border-box;
            padding: 0 20px;
        }

        .right .top2 .welcome {
            display: inline-block;
            height: 100%;
            background-color: #2d3e4e;
            padding: 0 20px;
            color: white;
        }

        .right .top2 .you select {
            height: 37px;
            border: none;
        }

        .right .top2 .you span {
            height: 100%;
            width: 50px;
            display: inline-block;
            border-left: 1px solid rgb(205, 203, 203);
            border-right: 1px solid rgb(205, 203, 203);
            text-align: center;
        }

        .shouru {
            box-sizing: border-box;
            padding: 0 20px;
            width: 100%;
            height: 75px;
            display: flex;
            justify-content: space-between;

        }

        .shouru .one {
            box-sizing: border-box;
            padding: 10px 20px;
            width: 24%;
            height: 100%;
            background-color: #0196c0;
        }

        .shouru .one:nth-child(3) {
            background-color: #14c376;
        }

        .shouru .one:nth-child(4) {
            background-color: #8f9080;
        }

        .content .tab {
            width: 100%;
            height: 400px;
            /* background-color: yellow; */
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            /* margin-bottom: 20px; */
            box-sizing: border-box;
            padding: 0 20px;
        }

        .tab div {
            width: 49%;
            height: 100%;
            background-color: white;
            /* margin-bottom: 20px; */
        }

        .tb {
            box-sizing: border-box;
            width: 100%;
            margin-top: 20px;
            /* background-color: white;   */
            box-sizing: border-box;
            padding: 0 20px;  
        }

        .right .tb table {
            width: 100%;
            text-align: center;
            line-height: 30px;
            background-color: white;
        }
    </style>
</head>

<body>
    <header>
        <div class="logo">
            <h1>后台管理系统</h1>
            <span class="iconfont icon-caidan"></span>
        </div>
        <div class="user">
            <span>当前用户：bootstrap</span>
            <span>角色：管理员</span>
        </div>
    </header>
    <div class="content">
        <div class="left">
            <ul>
                <li><span class="iconfont icon-shouye1"></span><span class="iconfont icon-youjiantou"></span>&ensp; 后台首页
                </li>
                <li><span class="iconfont icon-biaodanzujian-biaoge"></span><span
                        class="iconfont icon-youjiantou"></span>&ensp; 设计元素</li>
                <li><span class="iconfont icon-shuxie"></span><span class="iconfont icon-youjiantou"></span>&ensp; 表单元素
                </li>
                <li><span class="iconfont icon-xianshiqi"></span><span class="iconfont icon-youjiantou"></span>&ensp;
                    示例页面
                </li>
                <li><span class="iconfont icon-jurassic_table"></span><span
                        class="iconfont icon-youjiantou"></span>&ensp;
                    常用列表</li>
                <li><span class="iconfont icon-yunweijiaobenpingtai"></span><span
                        class="iconfont icon-youjiantou"></span>&ensp; 脚本插件</li>
                <li><span class="iconfont icon-tongji"></span><span class="iconfont icon-youjiantou"></span>&ensp; 统计图表
                </li>
            </ul>
        </div>
        <div class="right">
            <div class="top2">
                <div class="zuo">
                    <span class="iconfont icon-chevronsleftshuangzuojiantou"></span>
                    <span class="welcome">欢迎首页</span>
                </div>
                <div class="you">
                    <span>></span>
                    <select name="" id="">
                        <option value="">页签操作</option>
                    </select>
                </div>
            </div>
            <div class="shouru">
                <div class="one">
                    <span>今日收入</span>
                    <h2>100,000.00</h2>
                </div>
                <div class="one">
                    <span>今日收入</span>
                    <h2>100,000.00</h2>
                </div>
                <div class="one">
                    <span>今日收入</span>
                    <h2>100,000.00</h2>
                </div>
                <div class="one">
                    <span>今日收入</span>
                    <h2>100,000.00</h2>
                </div>
            </div>
            <div class="tab">
                <div id="zhu"></div>
                <div id="xian"></div>
            </div>
            <div class="tb">
                <table>
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>订单号</th>
                            <th>商品名称</th>
                            <th>下单日期</th>
                            <th>状态</th>
                            <th>处理情况</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>

    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="./promise-ajax.js"></script>
<script>
    let con = document.querySelector('#zhu')
    let e = echarts.init(con)
    e.setOption({
        title: { //图表的标题
            text: '每月收入',
            left: 'none',
        },
        legend: {
            top: 25
        },
        xAxis: [
            {
                type: 'category',
                data: [01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11, 12],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {

                min: 1500,
                max: 5000,
                interval: 500,

            }
        ],
        series: [
            {
                name: '当前每月收入',
                type: 'bar',
                color: '#7f9dd9',
                data: [2500, 1550, 1700, 3300, 4600, 3500, 1600, 2500, 2200, 1800, 3700, 1800]
            },
            {
                name: '同期每月收入',
                type: 'bar',
                color: '#c3e7fd',
                data: [2000, 1700, 1900, 3000, 4000, 3750, 1800, 2000, 2700, 2200, 3600, 3550]
            }
        ]
    }
    )
    let con2 = document.querySelector('#xian')
    let e2 = echarts.init(con2)
    e2.setOption({
        title: { //图表的标题
            text: '每年收入走势'
        },
        legend: { //图例
            bottom: 20,
            right: 10,
        },
        xAxis: { //x轴设置
            data: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020]
        },
        yAxis: { //y轴设置

        },
        series: [ //数据系列
            {
                name: '每年收入走势',
                type: 'line',
                data: [46, 50, 52, 48, 40, 35, 65, 45, 58, 30, 72, 56],
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'dodgerblue', //折线颜色
                        lineStyle: { width: 2 }, //折现的宽度
                    }
                }
            },
            {
                name: '每年同期收入走势',
                type: 'line',
                data: [50, 55, 60, 40, 45, 40, 65, 40, 68, 20, 72, 60],
                smooth: true, //是否平滑曲线显示
                itemStyle: {
                    normal: {
                        color: 'gray', //折线颜色
                        lineStyle: { width: 2 }, //折现的宽度
                    }
                }
            }
        ]
    });
    function render(method, url) {

        ajax(method ,url).then((data) => {
            let str = data.shop.map((item, index) => {
                return `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.num}</td>
                    <td>${item.name}</td>
                    <td>${item.time}</td>
                    <td>状态</td>
                    <td>处理情况</td>
                </tr>
                `
            }).join('')
            document.querySelector('tbody').innerHTML = str
        })
    }
    render( 'get' , './kuzi.json' )
    // function getCookie(key){

    // }
    document.cookie = "id=1 ; expires=" + new Date( new Date().getTime() + 24*60*60*1000)
    document.cookie = "num=23534536 ; expires=" + new Date( new Date().getTime() + 24*60*60*1000)
    document.cookie = "name=黑色牛仔裤 ; expires=" + new Date( new Date().getTime() + 24*60*60*1000)
    document.cookie = "time=2019-05-01 ; expires=" + new Date( new Date().getTime() + 24*60*60*1000)
    
    function getCookie(key){
        let c = document.cookie
        let arr = c.split(';')
        let obj = {}
        arr.forEach((item)=>{
            let arr2 = item.split('=')
            obj[arr2[0]] = arr2[1]
        })
        return obj[key]
    }
    console.log(getCookie('id'));
</script>